<template>
  <v-card
    class="after-school-student-card"
    :class="[statusClass, { 'card-checked-in': student.check_in_status === 'checked_in' }]"
    @click="$emit('card-click', student)"
    variant="flat"
    elevation="0"
  >
    <v-card-text class="pa-3">
      <div class="d-flex align-center mb-2">
        <v-avatar :color="avatarColor" size="40" class="me-3">
          <span class="text-white font-weight-bold">{{ student.name?.charAt(0) || '?' }}</span>
        </v-avatar>
        
        <div class="flex-grow-1">
          <h4 class="text-subtitle-1 font-weight-bold mb-0">{{ student.name }}</h4>
          <p class="text-caption text-medium-emphasis mb-0">{{ student.student_no }}</p>
          <v-chip size="x-small" color="blue" variant="tonal" class="mt-1">
            {{ student.class_name }}
          </v-chip>
        </div>
        
        <v-chip
          :color="statusColor"
          :variant="student.check_in_status ? 'elevated' : 'outlined'"
          size="small"
          class="status-chip"
        >
          {{ statusText }}
        </v-chip>
      </div>
      
      <!-- 进班时间信息 -->
      <div v-if="student.check_in_time" class="d-flex align-center mb-2">
        <v-icon size="16" class="me-2 text-medium-emphasis">mdi-clock-in</v-icon>
        <span class="text-caption">进班时间: {{ formattedCheckInTime }}</span>
      </div>
      
      <!-- 离班时间信息 -->
      <div v-if="student.check_out_time" class="d-flex align-center mb-2">
        <v-icon size="16" class="me-2 text-medium-emphasis">mdi-clock-out</v-icon>
        <span class="text-caption">离班时间: {{ formattedCheckOutTime }}</span>
      </div>
      
      <!-- 备注信息 -->
      <div v-if="student.notes" class="notes-section mb-2">
        <v-icon size="14" class="me-1 text-medium-emphasis">mdi-note-text</v-icon>
        <span class="text-caption">{{ student.notes }}</span>
      </div>
      
      <!-- 家长信息 -->
      <div v-if="showParentInfo && (student.parent_name || student.parent_phone)" class="parent-info mt-2">
        <div v-if="student.parent_name" class="d-flex align-center mb-1">
          <v-icon size="14" class="me-1 text-medium-emphasis">mdi-account</v-icon>
          <span class="text-caption">{{ student.parent_name }}</span>
        </div>
        <div v-if="student.parent_phone" class="d-flex align-center">
          <v-icon size="14" class="me-1 text-medium-emphasis">mdi-phone</v-icon>
          <span class="text-caption">{{ student.parent_phone }}</span>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div v-if="showActions" class="actions mt-3">
        <v-btn-group variant="outlined" density="compact" divided>
          <v-btn
            v-if="(student.check_in_status === 'checked_in' || student.attendance_status === 'class_entered') && student.attendance_status !== 'left_class' && student.attendance_status !== 'left_school'"
            size="small"
            color="orange"
            @click.stop="$emit('check-out', student)"
          >
            <v-icon size="16">mdi-logout</v-icon>
            <span class="ms-1">确认离班</span>
          </v-btn>
          
          <v-btn
            size="small"
            color="blue"
            @click.stop="$emit('edit-notes', student)"
          >
            <v-icon size="16">mdi-note-edit</v-icon>
            <span class="ms-1">备注</span>
          </v-btn>
        </v-btn-group>
      </div>
    </v-card-text>
    
    <!-- 状态指示器 -->
    <div class="status-indicator" :class="statusIndicatorClass"></div>
  </v-card>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  student: {
    type: Object,
    required: true
  },
  showParentInfo: {
    type: Boolean,
    default: false
  },
  showActions: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['card-click', 'check-in', 'check-out', 'edit-notes'])

// 计算属性
const statusText = computed(() => {
  // 优先使用attendance_status，如果没有则使用check_in_status
  const status = props.student.attendance_status || props.student.check_in_status
  const statusMap = {
    // 新的状态映射
    'class_entered': '已进班',
    'class_left': '已离班', 
    'present': '已进校',
    'left_school': '已离校',
    'not_left': '已进校',
    // 兼容旧的状态
    'left_class': '已离班',
    checked_in: '已进班',
    checked_out: '已离班',
    not_checked_in: '未进班',
    null: '未进班',
    undefined: '未进班'
  }
  return statusMap[status] || '未进班'
})

const statusColor = computed(() => {
  // 优先使用attendance_status，如果没有则使用check_in_status
  const status = props.student.attendance_status || props.student.check_in_status
  const colorMap = {
    // 新的状态颜色映射
    'class_entered': 'green',
    'class_left': 'blue',
    'present': 'orange', 
    'left_school': 'purple',
    'not_left': 'orange',
    // 兼容旧的状态
    'left_class': 'blue',
    checked_in: 'green',
    checked_out: 'blue',
    not_checked_in: 'grey',
    null: 'grey',
    undefined: 'grey'
  }
  return colorMap[status] || 'grey'
})

const avatarColor = computed(() => {
  const colors = ['primary', 'secondary', 'accent', 'info', 'success']
  const name = props.student.name || ''
  const index = name.charCodeAt(0) % colors.length
  return colors[index]
})

const statusClass = computed(() => {
  const status = props.student.attendance_status || props.student.check_in_status || 'not-checked-in'
  // 将状态值转换为CSS类名格式
  const cssStatus = status.replace(/_/g, '-')
  return `status-${cssStatus}`
})

const statusIndicatorClass = computed(() => {
  const status = props.student.attendance_status || props.student.check_in_status || 'not-checked-in'
  // 将状态值转换为CSS类名格式
  const cssStatus = status.replace(/_/g, '-')
  return `indicator-${cssStatus}`
})

const formattedCheckInTime = computed(() => {
  if (!props.student.check_in_time) return ''
  
  const time = props.student.check_in_time
  if (time.includes(':')) {
    return time.substring(0, 5) // HH:MM
  }
  return time
})

const formattedCheckOutTime = computed(() => {
  if (!props.student.check_out_time) return ''
  
  const time = props.student.check_out_time
  if (time.includes(':')) {
    return time.substring(0, 5) // HH:MM
  }
  return time
})
</script>

<style scoped>
.after-school-student-card {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none !important;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.after-school-student-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

.card-checked-in {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
}

/* 状态背景颜色 */
.status-class-entered {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
  color: #2e7d32;
}

.status-left-class {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  color: #1565c0;
}

.status-present {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  color: #ef6c00;
}

.status-left-school {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  color: #7b1fa2;
}

.status-not-left {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  color: #ef6c00;
}

/* 兼容旧状态 */
.status-checked-in {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
  color: #2e7d32;
}

.status-checked-out {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  color: #1565c0;
}

.status-not-checked-in {
  background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
  color: #424242;
}

/* 状态指示器 */
.status-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
}

.indicator-class-entered {
  border-color: transparent #4caf50 transparent transparent;
}

.indicator-left-class {
  border-color: transparent #2196f3 transparent transparent;
}

.indicator-present {
  border-color: transparent #ff9800 transparent transparent;
}

.indicator-left-school {
  border-color: transparent #9c27b0 transparent transparent;
}

.indicator-not-left {
  border-color: transparent #ff9800 transparent transparent;
}

/* 兼容旧状态 */
.indicator-checked-in {
  border-color: transparent #4caf50 transparent transparent;
}

.indicator-checked-out {
  border-color: transparent #2196f3 transparent transparent;
}

.indicator-not-checked-in {
  border-color: transparent #9e9e9e transparent transparent;
}

/* 备注样式 */
.notes-section {
  background: rgba(33, 150, 243, 0.08);
  border-radius: 4px;
  padding: 4px 8px;
  border-left: 2px solid #2196F3;
  display: flex;
  align-items: flex-start;
}

/* 家长信息 */
.parent-info {
  font-size: 0.75rem;
  background: rgba(156, 39, 176, 0.08);
  border-radius: 4px;
  padding: 4px 8px;
  border-left: 2px solid #9c27b0;
}

/* 状态芯片 */
.status-chip {
  font-weight: 600;
  font-size: 0.75rem;
}

/* 操作按钮 */
.actions .v-btn {
  min-width: 60px !important;
}

/* 全局样式调整 */
.after-school-student-card .v-card-text {
  padding: 12px !important;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .v-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  
  .actions .v-btn-group {
    flex-wrap: wrap;
  }
  
  .actions .v-btn {
    flex: 1;
    min-width: 50px !important;
  }
}

/* 动画效果 */
.after-school-student-card {
  animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 深色主题适配 */
.v-theme--dark .after-school-student-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.v-theme--dark .card-checked-in {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
}

.v-theme--dark .notes-section {
  background: rgba(255, 255, 255, 0.05);
}

.v-theme--dark .parent-info {
  background: rgba(255, 255, 255, 0.05);
}
</style>